<template>
    <view>
        <!-- 优化后的搜索导航栏 -->
        <navView navTitle="搜索" titleColor="#fff" :isBack="true"></navView>

        <!-- 新增头部阴影 -->
        <view class="container" style="padding-top: 0;">
            <!-- 优化后的分类标签 -->
            <view class="tab-bar" style="margin-top: 20rpx;">
                <text :class="['tab-item', activeTab === 0 ? 'active' : '']" @tap="switchTab(0)"
                    style="transition: all 0.3s;">客户</text>
                <text :class="['tab-item', activeTab === 1 ? 'active' : '']" @tap="switchTab(1)">联系人</text>
                <text :class="['tab-item', activeTab === 2 ? 'active' : '']" @tap="switchTab(2)">合同</text>
            </view>
            <john-progress :value="progress" circleColor="#ACBAF8" circleBgColor="#707B9E" :diameter="140"
                :circleWidth="14">
            </john-progress>
            <!-- 客户列表 -->
            <view class="list" v-show="activeTab === 0">
                <view class="item" v-for="item in data.customer" :key="item.id"
                    @tap="$navTo('/subpkg/userList/detail?id=' + item.id)">
                    <image class="avatar" :src="item.owner_staff.img" mode="aspectFill"></image>
                    <view class="info">
                        <view class="name">{{ item.name }}</view>
                        <view class="meta">
                            <text>跟进：{{ item.follow }}</text>
                            <text>下次联系：{{ item.next_time }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="data.customer.length === 0" class="empty-tips">
                    <text>暂无相关客户</text>
                </view>
                <!-- 原有客户列表代码保持不变 -->
            </view>

            <!-- 联系人列表 -->
            <view class="list" v-show="activeTab === 1">
                <view class="item" v-for="item in data.contacts" :key="item.id">
                    <view class="info">
                        <view class="name">{{ item.name }}</view>
                        <view class="meta">
                            <text>所属客户：{{ item.customer.name }}</text>
                            <text>电话：{{ item.mobile }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="data.contacts.length === 0" class="empty-tips">
                    <text>暂无相关联系人</text>
                </view>
                <!-- 原有联系人列表代码保持不变 -->
            </view>

            <!-- 合同列表 -->
            <view class="list" v-show="activeTab === 2">
                <view class="item" v-for="item in data.contract" :key="item.id"
                    @tap="$navTo('/subpkg/contract/contractDetail/contractDetail?id=' + item.id)">
                    <view class="info">
                        <view class="name">{{ item.name }}</view>
                        <view class="meta">
                            <text>合同编号：{{ item.num }}</text>
                            <text>联系电话：{{ item.mobile }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="data.contract.length === 0" class="empty-tips">
                    <text>暂无相关合同</text>
                </view>
                <!-- 原有合同列表代码保持不变 -->
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 0,
            keywords: '',
            data: {
                customer: [],
                contacts: [],
                contract: []
            },
        }
    },
    onLoad(options) {
        console.log(options, 'options')
        this.keywords = options.keywords || ''
        // 这里调用搜索接口，示例：
        this.getSearchResult()
    },
    methods: {
        switchTab(index) {
            this.activeTab = index
        },
        onSearch(keywords) {
            this.keywords = keywords
            this.getSearchResult()
        },
        async getSearchResult() {
            // 示例请求，需根据实际接口修改
            const res = await this.$request('/addons/qingdong/index/search', 'POST', {
                keywords: this.keywords
            }).then(res => {
                this.data = res.data
            })
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
}
.container {
    padding: 20rpx;
}

.tab-bar {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
}

.tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 15rpx 0;
}

.tab-item.active {
    color: #007AFF;
    font-weight: bold;
    border-bottom: 4rpx solid #007AFF;
}

.list {
    margin-top: 20rpx;
}

.item {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.info {
    flex: 1;
}

.name {
    font-size: 30rpx;
    color: #333;
    margin-bottom: 10rpx;
}

.meta {
    font-size: 24rpx;
    color: #999;
}

.meta text {
    display: block;
    line-height: 1.6;
}

.tab-bar {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
}

/* 优化后的标签样式 */
.tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 15rpx 0;
}

.tab-item.active {
    color: #fff !important;
    background: #007AFF;
    border-radius: 40rpx;
    padding: 15rpx 30rpx !important;
    border-bottom: none !important;
}

/* 新增头部阴影 */
.container {
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.03);
    border-radius: 20rpx 20rpx 0 0;
    margin-top: -20rpx;
    background: #fff;
    position: relative;
    z-index: 2;
}

/* 优化列表项间距 */
.item {
    margin-bottom: 16rpx !important;
}

/* 空状态提示 */
.empty-tips {
    text-align: center;
    padding: 60rpx 0;
    color: #999;
    font-size: 28rpx;
    background: #fff;
    border-radius: 16rpx;
    margin: 20rpx 0;
}

.empty-tips text {
    display: block;
    margin-top: 20rpx;
}
</style>